<template>
    <div class="subpage account-balance-container">
        <div class="account-balance-top" v-if="listData.length > 0">
            <p class="color-primary">{{accountMoney || '0.00'}}</p>
            <p>账户余额（元）</p>
        </div>
        <div class="account-balance-box">
            <van-list
                v-model="loading"
                :immediate-check="false"
                :finished="finished"
                finished-text="已加载全部了哦～"
                @load="onLoadMore"
            >
                <billListBase :listData="listData" v-if="listData.length > 0"></billListBase>
            </van-list>
            <div class="no-data" v-if="showNoInfo">
                <img src="../../../assets/img/balance_empty.png" alt="">
                <p>您还没有账户余额明细哦～</p>
            </div>
        </div>
        <!-- <ul class="account-balance-bottom" v-if="listData.length > 0">
            <li @click="jumpDetail()">
                <div class="account-balance-bottom-left">
                    <p>账户余额提现</p>
                    <p>2019年9月8日 20:55</p>
                </div>
                <div class="account-balance-bottom-right">
                    <span>-20150元</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
            <li>
                <div class="account-balance-bottom-left">
                    <p>账户余额提现</p>
                    <p>2019年9月8日 20:55</p>
                </div>
                <div class="account-balance-bottom-right">
                    <span>-20150元</span>
                    <van-icon name="arrow" class="arrow-right" />
                </div>
            </li>
        </ul> -->
    </div>
</template>

<script>
import { List } from 'vant';
import billListBase from '../bill/BillComponent';
export default {
    components: {
        [List.name]:List,
        billListBase
    },
    data() {
        return {
            accountMoney: '',
            listData: [],
            pageIndex: 1,
            pageSize: 10,
            showNoInfo: false,
            loading: false,
            finished: false,
        }
    },
    created() {
        this.accountMoney = this.$route.query.accountMoney;
        this.getListData()
    },
    methods: {
        jumpDetail() {
            this.$router.push({
                path: '/my/accountBalance/accountBalanceDetail/1'
            })
        },
        getListData() { //获取数据
            let getData = {
                pgCt: this.pageIndex,
                pgSz: this.pageSize,
                payMethod: 2
            }
            let url = this.pageIndex > 1 ? '/api/trading/list?noLoading' : '/api/trading/list'
            this.$api.get(url, getData)
                .then((res) => {
                    this.showNoInfo = res.data.ipage.total > 0 ? false : true;
                    if(res.data.ipage.records.length > 0){
                        res.data.ipage.records.forEach((item) => {
                            item.actTime = this.$tool.dateFormat(item.actTime, 3)
                        })
                    }
                    this.listData = this.listData.concat(res.data.ipage.records)
                    if(this.pageIndex > 1 && res.data.ipage.records.length < this.pageSize){
                        this.finished = true;
                    }
                })
        },
        onLoadMore() {
            // 异步更新数据
            setTimeout(() => {
                this.pageIndex++;
                this.getListData()
                // 加载状态结束
                this.loading = false;
            }, 500);
        },
    }
}
</script>

<style lang="scss" scoped>
    .account-balance-container {
        background-color: #fff;
        .account-balance-top {
            width: 100%;
            height: 93px;
            padding: 24px 16px;
            box-sizing: border-box;
            border-bottom: 1px solid #f2f2f2;
            text-align: center;
            p:first-child {
                margin-bottom: 6px;
                font-size: 22px;
            }
            p:last-child {
                color: #969C9E;
            }
        }
        .account-balance-box {
            width: 100%;
            height: calc(100vh - 106px);
            overflow-y: scroll;
        }

        .no-data {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            text-align: center;
            img{
                width: 162px;
                height: 162px;
                margin: -90px auto 14px;
            }
            p {
                color: #969C9E;
            }
        }
    }
</style>